<template>
  <div>
    vue中使用openlayer实现视图联动
    <div class="main">
      <div id="map1" style="width: 500px;height: 500px"></div>
      <div id="map2" style="width: 500px;height: 500px"></div>
    </div>
  </div>

</template>

<script>
import {Map,View} from 'ol'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'

export default {
  name: 'multiView',
  data() {
    return {

    };
  },
  mounted() {
    var map1= new Map({
      target: "map1",
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        projection: "EPSG:4326",    //使用这个坐标系
        center: [104.704968,31.540962],  //西南科技大学
        zoom: 15
      })
    });

    var map2=new Map({
      target: "map2",
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view:map1.getView()
    });
    console.log(map1)
    console.log(map2)
  }
};

</script>

<style lang='less'>
.main{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  //  border: 1px solid red;
  #map1{
    border: 1px solid rgb(122, 116, 116);

    display: flex;
    width: 50%;
    background-color: rgb(121, 119, 119);
    margin-right: 10px;
  }
  #map2{
    border: 1px solid rgb(122, 116, 116);

    display: flex;
    flex: auto;
    background-color: rgb(121, 119, 119);
  }
}

</style>